<template lang="pug">
el-dialog(
  :visible.sync="show"
  title="上传图片"
  width="800px"
  @open="beforeOpen"
  :before-close="handleClose"
  :close-on-click-modal="false"
)
  .modal-content
    ali-upload(
      @getFileInfo="getFileInfo"
      @getProgress="getProgress"
      multiple
      accept=".jpg,.png,.gif,.bmp"
    )
      .form-item-add.form-item-add_upload
        i.el-icon-plus
        .form-item-add_text 点击上传图片
    .file-item(v-for="item in tempFileList")
      .file-item-img(:style="`background-image: url(${item.fileSrc})`")
      .file-item-progress.pink(v-if="item.progress < 100 && item.isSuccess != 2" :style="`width: ${item.progress}%`") 上传中...
      .file-item-progress(v-if="item.isSuccess == 2" :style="`width: ${item.progress}%`") 上传失败
      .file-item-progress(v-if="item.progress == 100") 上传成功
  .modal-footer(slot="footer")
    .modal-footer-info 点击确定添加上传成功图片到图片册
    el-button(size="small" name="pink" @click="confirm") 确定
    el-button(size="small" @click="handleClose") 取消
</template>

<script>
import aliUpload from "@/components/customUpload"
import { savePhotoBatch } from 'api'
export default {
  name: 'photoDialog',
  props: {
    show: Boolean,
    albumId: [String, Number]
  },
  components: {
    aliUpload
  },
  data () {
    return {
      fileList: [],
      tempFileList: []
    }
  },
  methods: {
    getFileInfo (fileList) {
      this.fileList.push(...fileList)
    },
    getProgress (fileList) {
      fileList.forEach(item => {
        let index = this.tempFileList.findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.tempFileList[index] = item
        } else {
          this.tempFileList.push(item)
        }
      })
    },
    async confirm () {
      try {
        let valid = this.tempFileList.every(item => item.progress === 100 || item.isSuccess === 2)
        if (!valid) {
          this.$message.error('还有图片正在上传中，现在保存有可能会丢失数据！！！')
          return
        }
        let postList = []
        let fileList = this.tempFileList.filter(item => item.progress === 100)
        fileList.forEach(item => {
          let fileItem = this.fileList.find(row => row.uid === item.uid)
          if (fileItem) postList.push(fileItem)
        })
        let ids = postList.map(item => { return item.fileId })
        if (ids.length) {
          await this.$axios.post(savePhotoBatch, { content: { albumId: this.albumId, fileId: ids } })
          this.$message.success('添加成功！')
          this.$emit('confirm')
        } else {
          this.$emit('close')
        }
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    beforeOpen () {
      this.fileList = []
      this.tempFileList = []
    },
    handleClose () {
      if (this.tempFileList.length) {
        this.$confirm('直接关闭会造成上传的数据丢失，确定要关闭弹窗吗？', '提示').then(() => {
          this.$emit('close')
        })
      } else {
        this.$emit('close')
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.modal-content {
  display: flex;
  flex-wrap: wrap;
  max-height: 500px;
  overflow: auto;
}
.form-item-add {
  width: 110px;
  height: 110px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  &.form-item-add_upload {
    cursor: pointer;
    border: 1px dashed #999;
  }
  &.form-item-add_img {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    & .el-checkbox-iconfont {
      position: absolute;
      right: -8px;
      top: -8px;
      font-size: 16px;
      display: none;
    }
    & .form-item-add_operation {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.50);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 17px;
    }
    .form-item-add_tag {
      position: absolute;
      top: 0;
      left: 0;
      width: 45px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.50);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 17px;
    }
  }
  & .el-icon-plus {
    display: block;
    font-size: 36px;
    color: #999
  }
  & .form-item-add_text {
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
.file-item {
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}
.file-item-img {
  width: 110px;
  height: 110px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.file-item-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 60%;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 12px;
  text-align: center;
  &.pink {
    background: #FF708B;
  }
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.modal-footer-info {
  font-size: 12px;
  color: #999;
  margin-right: 10px;
}
</style>